<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件向父组件传值</title> 
    <script src="../vue.js"></script>
</head>
<body>
    <template id="pcompontent">
       <div>
            <h1>{{pmsg}}</h1>
            <h2><span style="color: hotpink;">{{message}}</span></h2>
            <cc @change="getval"></cc>
       </div>
    </template>
    <template id="ccompontent">
        <div>
            <h2>{{cmsg}}</h2>
            <button @click="fn">子组件按钮</button>
        </div>
    </template>
    <div id="app">
        <pc></pc>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'pc':{
                template:'#pcompontent',
                data:function(){
                    return{
                        message:'',
                        pmsg:'父组件中的内容'
                    }
                },
                methods:{
                    getval:function(message){
                       this.message=message;
                    }
                },
                components:{
                    'cc':{
                        template:'#ccompontent',
                        data:function(){
                            return{
                                cmsg:'子组件的内容'
                            }
                        },
                        methods:{
                            fn:function(){
                               this.$emit('change',this.cmsg);
                            }
                        }
                    }
                }
            }
        }
    });
</script>